﻿$(document).ready(function(){	

	$('.hotsite-navigation ul li a:contains(' + $('.hotsite-name').html() + ')').addClass('active');
	$(".hotsite-navigation #warp").linkVerticalScroll();
	
	$('.hotsite-productswrapper ul').prepend('<li class="collection-about"> \
		<div class="collection-name"> \ ' + $('.hotsite-name').html() + '</div> \
		<div class="collection-description">' + $('.hotsite-description').html() + '</div> \
	</li>');

	//SCROLLPANE
	$('.hotsite-products ul li a img').attr({"width":"229","height":"229"});
	$('.hotsite-productswrapper').width( ( $('.hotsite-products ul li').size() * (229+11) ) - 11  );
	
	if( $(".hotsite-products ul li").size()<=3 ){
		$(".scroll-bar").hide();
		$("#selectui").hide();
	}
	
	//scrollpane parts
	var scrollPane = $( ".hotsite-products" );
	var scrollContent = $('.hotsite-productswrapper');
	
	//build slider
	var scrollbar = $( ".scroll-bar" ).slider({
		slide: function( event, ui ) {
			if ( scrollContent.width() > scrollPane.width() ) {
				scrollContent.css( "margin-left", Math.round(
					ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
				) + "px" );
			}else {
				scrollContent.css( "margin-left", 0 );
			}
		}
	});
	
	//append icon to handle
	var handleHelper = scrollbar.find( ".ui-slider-handle" )
	.mousedown(function() {
		scrollbar.width( handleHelper.width() );
	})
	.mouseup(function() {
		scrollbar.width( "100%" );
	})
	.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
	.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
	
	//change overflow to hidden now that slider handles the scrolling
	scrollPane.css( "overflow", "hidden" );
	
	
	
	//size scrollbar and handle proportionally to scroll distance
	function sizeScrollbar() {
		var remainder = scrollContent.width() - scrollPane.width();
		var proportion = remainder / scrollContent.width();
		var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
		scrollbar.find( ".ui-slider-handle" ).css({
			width: handleSize
		});
		handleHelper.width( "" ).width( scrollbar.width() - handleSize );
	}

	//reset slider value based on scroll content position
	function resetValue() {
		var remainder = scrollPane.width() - scrollContent.width();
		var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
			parseInt( scrollContent.css( "margin-left" ) );
		var percentage = Math.round( leftVal / remainder * 100 );
		scrollbar.slider( "value", percentage );
	}

	//if the slider is 100% and window gets larger, reveal content
	function reflowContent() {
			var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
			var gap = scrollPane.width() - showing;
			if ( gap > 0 ) {
				scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
			}
	}
	
	//change handle position on window resize
	$( window ).resize(function() {
		resetValue();
		sizeScrollbar();
		reflowContent();
	});
	//init scrollbar size
	setTimeout( sizeScrollbar, 10 );//safari wants a timeout
	
	$('#active-option').click(function () {
		
		$(this).next().slideToggle();
	
	});
	
	$('#next-hotsites').click(function() {
	
		
		$('.hotsite-navigation #warp #tabs').css('')

	});
	
	$('#previously-hotsites').click(function() {


	});
	
    if ( $('.hotsite-productswrapper ul li').size() <= 4 ){
    
        $('#selectui').hide();
    
    }
	
});

jQuery.fn.linkVerticalScroll = function() {

	var tabsWidth = 0;
	
	$("#tabs-container ul#tabs li:last").css("margin-right", 0);
	
    $(this).find('#tabs-container #tabs').find("li").each(function(){
		tabsWidth += $(this).outerWidth(true);
	});
	
	$(this).find('#tabs-container #tabs').css({"width": tabsWidth, "margin-left": "0"});
	$(this).find("#next-hotsites, #previously-hotsites").css("display", "block");
	
	var animation;
	
	$(this).find("#previously-hotsites").mouseenter(function(){
		var limit = (($("#tabs-container #tabs").width() - $("#tabs-container").width()) * (-1));
		animation = setInterval(function(){
			if(parseInt($("#tabs-container #tabs").css("margin-left").replace("px", "")) >= limit){
				var left = parseInt($("#tabs-container #tabs").css("margin-left").replace("px", "")) - 3;
				$("#tabs-container #tabs").css("margin-left", left);
			}
		}, 1);
	});
	$(this).find("#previously-hotsites").mouseleave(function(){
		if(typeof(animation) != undefined){
			clearInterval(animation);
		}
	});
	
	$(this).find("#next-hotsites").mouseenter(function(){
			animation = setInterval(function(){
				if(parseInt($("#tabs-container #tabs").css("margin-left").replace("px", "")) < 0){
					var left = parseInt($("#tabs-container #tabs").css("margin-left").replace("px", "")) + 3;
					$("#tabs-container #tabs").css("margin-left", left);
				}
			}, 1);
	});
	$(this).find("#next-hotsites").mouseleave(function(){
		if(typeof(animation) != undefined){
			clearInterval(animation);
		}
	});
	
};